<template>
  <div class="container">
    <el-drawer
      v-model="drawer"
      :before-close="close"
      :with-header="false"
      size="500px"
      ><div id="account-form-container">
        <el-card class="box-card" shadow="never" :body-style="{ border: 0 }">
          <template #header>
            <div class="clearfix">
              <span
                v-text="eventType == 'add' ? '创建用户' : '修改用户'"
              ></span>
            </div>
          </template>
          <el-form
            ref="accountAdd"
            :model="
              eventType == 'add' ? (account = account) : (account = editAccount)
            "
            label-width="80px"
            :rules="accountRules"
            ><el-form-item label="电话号码" prop="telephone">
              <el-input
                :disabled="eventType == 'edit'"
                v-model="account.telephone"
                placeholder="请输入用户电话，该项输入后不能修改"
              ></el-input>
            </el-form-item>
            <el-form-item label="用户姓名" prop="username">
              <el-input
                v-model="account.username"
                placeholder="请输入用户姓名"
              ></el-input>
            </el-form-item>

            <el-form-item label="添加权限" prop="addpower">
              <el-radio-group v-model="account.addpower">
                <el-radio :label="1">有</el-radio>
                <el-radio :label="0">无</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="用户类型" prop="userType">
              <el-select
                v-model="account.userType"
                placeholder="请选择用户类型"
              >
                <el-option label="管理员" :value="3"></el-option>
                <el-option label="百叶" :value="4"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button
                :loading="addButtoonLoading"
                type="primary"
                @click="onAddAccount"
                >保存</el-button
              >
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </el-drawer>
  </div>
</template>

<script lang="ts">
import { reactive, ref, toRefs, unref, computed } from "vue";
import { UserService, Account } from "@/api/user";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";

export default {
  name: "userDrawer",
  props: {
    eventType: {
      type: String,
      default: "add",
    },
    drawer: {
      type: Boolean,
      default: false,
    },
    userId: {
      type: String,
      default: "",
    },
    handleClose: {
      type: Function,
    },
    editAccount: {
      type: Account,
    },
  },
  setup(props: any) {
    const accountAdd = ref();
    const store = useStore();
    let data = reactive({
      addButtoonLoading: false,
      account: new Account(),
      page: computed(() => store.state.User.page),
      pageSize: computed(() => store.state.User.size),
      accountRules: {
        username: [
          { required: true, message: "请输入用户姓名", trigger: "blur" },
        ],
        telephone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: /^1[3|5|7|8|9]\d{9}$/,
            message: "请输入正确的号码格式",
            trigger: "change",
          },
        ],
        userType: [
          { required: true, message: "请选择用户类型", trigger: "change" },
        ],
        addpower: [
          {
            required: true,
            message: "请选择是否拥有添加账户的权限",
            trigger: "change",
          },
        ],
      },
      close() {
        props.handleClose();
        data.account = new Account();
      },
      onAddAccount() {
        const accountAddq = unref(accountAdd);
        if (!accountAddq) return;
        accountAddq.validate((valid: Boolean) => {
          if (valid) {
            data.addButtoonLoading = true;
            UserService.addAccount(data.account).then((res) => {
              if (res.code == 200) {
                ElMessage({
                  showClose: true,
                  message:
                    props.eventType == "add" ? "创建用户成功" : "编辑用户成功",
                  type: "success",
                });
                accountAddq.resetFields();
                store.dispatch("User/addAfterLoadUserList", {
                  page: data.page,
                  pageSize: data.pageSize,
                });
                if (props.eventType == "edit") {
                  props.handleClose();
                }
              }
              data.addButtoonLoading = false;
            });
          } else {
            return false;
          }
        });
      },
    });

    return {
      ...toRefs(data),
      accountAdd,
    };
  },
};
</script>

<style lang="less" scoped>
.container {
  margin: 0 15px;
}
</style>

<style lang="less">
#account-form-container {
  .el-card {
    border: none;
  }
}
</style>
